<template>
    <el-dialog v-model="dialogVisible" title="用户选择" width="640"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @open="selectUserOpen"
    @closed="selectUserClosed">
        <div class="select_user_container">
            <div class="select_user_left">
                <el-row :gutter="24">
                    <el-col :span="9">
                        <el-input v-model="searchForm.code" placeholder="请输入员工工号" clearable size="small"/>
                    </el-col>
                    <el-col :span="9">
                        <el-input v-model="searchForm.userName" placeholder="请输入员工名称" clearable size="small"/>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="searchUser" size="small" icon="Search">查询</el-button>
                    </el-col>
                </el-row>
                <el-table :data="tableData.records" height="400">
                    <el-table-column align="center" prop="code" label="员工工号" min-width="120" />
                    <el-table-column align="center" prop="nickname" label="员工名称" min-width="120" />
                    <el-table-column align="center" label="操作" width="100">
                        <template #header>
                            <el-link type="primary" :underline=false @click="selectAllUser()">选择全部</el-link>
                        </template>
                        <template #default="scope">
                            <el-link type="primary" :underline=false @click="selectUser(scope.$index, scope.row)">选择</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                v-model:current-page="tableData.current"
                v-model:page-size="tableData.size"
                :pager-count="5"
                :page-sizes="[10, 20, 50, 100]"
                layout="prev, pager, next, total"
                :total="tableData.total"
                @current-change="handleCurrentChange"
                />
            </div>
            <div class="select_user_right">
                <div class="select_user_top_span">
                    <el-link type="primary" :underline=false @click="clearSelectAllUser">清除所有</el-link>
                </div>
                <div class="select_user_scroll">
                    <el-scrollbar height="360px">
                        <div class="show_user_span">
                            <el-tag v-for="item in selectUserList" :key="item.code" closable
                            @close="removeSelectUser(item)" class="user_tag">
                                {{item.nickname}}
                            </el-tag>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="select_user_right_bottom">
                    <el-button @click="cancelSelectUser">取消</el-button>
                    <el-button type="primary" @click="confirmSelectUser">
                        确认选择
                    </el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import {tool} from "@/js/tool.js";

export default {
    name: 'select-user',
    props: {
        result: {
            type: Array,
            default: []
        },
        isShow: {
            type: Boolean,
            default: false
        },
        closed: {
            type: Function
        },
        confirm: {
            type: Function
        }
    },
    data: function () {
        return {
            dialogVisible: this.isShow,

            searchForm: {
                code: null,
                nickname: null,
                page: 1,
                size: 10
            },
            tableData: {
                total: 0,
                size: 10,
                current: 1,
                records: []
            },
            selectUserList: [],
            selectUserMap: {}
        }
    },
    methods: {
        selectUserOpen: function(){
            const param = this.searchForm;
            getUserList(this, param);

            if(this.result.length > 0){
                for(let i=0;i<this.result.length;i++){
                    let item = this.result[i];
                    const userId = item.userId;
                    if(this.selectUserMap[userId] == null){
                        this.selectUserMap[userId] = item;
                        this.selectUserList.push(item);
                    }
                }
            }
        },
        selectUserClosed: function(){
            this.selectUserList = new Array();
            this.selectUserMap = {};
            this.closed();
        },
        searchUser: function(){
            const param = this.searchForm;
            getUserList(this, param);
        },
        selectUser: function(selection, row){
            const userId = row.userId;
            if(this.selectUserMap[userId] == null){
                this.selectUserMap[userId] = row;
                this.selectUserList.push(row);
            }
        },
        selectAllUser: function(){
            for(let i = 0; i < this.tableData.records.length; i++){
                let item = this.tableData.records[i];
                const userId = item.userId;
                if(this.selectUserMap[userId] == null){
                    this.selectUserMap[userId] = item;
                    this.selectUserList.push(item);
                }
            }
        },
        handleCurrentChange: function(num){
            this.searchForm.page = num;
            const param = this.searchForm;
            getUserList(this, param);
        },
        removeSelectUser: function(tag){
            Reflect.deleteProperty(this.selectUserMap, tag.code);
            for(let i = 0; i < this.selectUserList.length; i++){
                let item = this.selectUserList[i];
                if(item.code == tag.code){
                    this.selectUserList.splice(i,1);
                    break;
                }
            }
        },
        clearSelectAllUser: function(){
            this.selectUserList = new Array();
            this.selectUserMap = {};
        },
        confirmSelectUser: function(){
            //清空之前选择的
            this.result.splice(0, this.result.length);
            
            for(let i=0;i<this.selectUserList.length;i++){
                this.result.push(this.selectUserList[i]);
            }
            this.confirm();
            this.dialogVisible = false;
        },
        cancelSelectUser: function(){
            this.dialogVisible = false;
        }
    },
    created: function () {
        
    },
    watch: {
        isShow(newValue){
            this.dialogVisible = newValue;
        }
    }
}

/**
* 获取用户信息列表
* @param app app对象
* @param param 获取数据的列表
*/
function getUserList(app,param){
    const url = "/user/list";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code === "0000"){
            app.tableData.total = data.data.total;
            app.tableData.size = data.data.size;
            app.tableData.current = data.data.current;
            app.tableData.records = data.data.records;
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                    type: 'error'
            });
        }
    });
}
</script>
<style>
:root {
    --select-user-border: 1px solid #e4e7ed
}
.select_user_container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    height: 460px;
}
.select_user_left {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: 100%;
}
.select_user_right {
    width: calc(35% - 2px);
    height: 100%;
    border-left: var(--select-user-border);
}
.select_user_right .select_user_top_span {
    display: flex;
    width: 100%;
    height: 30px;
    justify-content: flex-end;
    border-bottom: var(--select-user-border);
}
.select_user_right .select_user_scroll {
    width: 100%;
    height: 380px;
}
.select_user_right .select_user_right_bottom {
    display: flex;
    justify-content: end;
    margin-top: 8px;
    width: 100%;
    height: 30px;
}
.show_user_span {
    display: flex;
    flex-wrap: wrap;
    width: 92%;
    height: auto;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
.show_user_span .user_tag {
   margin-bottom: 5px;
   margin-right: 5px;
}
</style>